<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
    <div>
        <div class="container">
            <div>
                <el-form :model="formInline" class="select-submit-form">
                    <el-row type="flex">
                        <!-- <el-col :span="8" >
                            <el-form-item label="归属机构">
                                <el-select v-model="formInline.comCode" placeholder="请选择归属机构">
                                    <el-option v-for="item in comList" :key="item.comCode" :label="item.comName" :value="item.comCode"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="8"  >
                            <el-form-item label="保单号" prop="policyNo" >
                                <el-input v-model="formInline.policyNo"  placeholder="" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="大病赔案号" prop="caseNo" >
                                <el-input v-model="formInline.caseNo"  placeholder="" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" >
                            <el-form-item label="支付用户名" prop="payeeName">
                                <el-input v-model="formInline.payeeName"  placeholder="" ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex">
                        <el-col :span="8"  >
                            <el-form-item label="银行账号">
                                <el-input v-model="formInline.bankNo"  placeholder="" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="核赔通过时间">
                                <el-date-picker
                                    v-model="undwrtPassTime"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd hh:mm:ss">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="select-btn-group">
                                <el-button type="primary" size="medium"  @click="handleSearch">查询</el-button>
                                <el-button type="primary" size="medium" @click="handleReset('formInline')">重置</el-button>
                                <el-button type="primary" size="medium" @click="exportCaseReportInfoExcel">导出</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!-- <template>
                <div>
                    <el-divider></el-divider>
                </div>
            </template> -->
            <!-- 列表 -->
            <el-table
                :data="tableData"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                style="margin: 30px 0;border: 1px solid #d6d9d8;"
                v-loading="loading"
                element-loading-text="Loading....."
            >
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="projectName" label="项目名称"  align="center"></el-table-column>
                <el-table-column prop="caseNo" label="大病赔案号" width="165" align="center">
                    <template  slot-scope="scope">
                        <a href="#">{{scope.row.caseNo}}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="insuredName" label="被保险人" align="center"></el-table-column>
                <el-table-column prop="documentNo" label="证件号" align="center"></el-table-column>
                <el-table-column prop="medSumAmount" label="医疗费用总额"  align="center"></el-table-column>
                <el-table-column prop="medReimburseAmount" label="医保已报销"  align="center"></el-table-column>
                <el-table-column prop="busiPayAmount" label="商保赔付金额"  align="center"></el-table-column>
                <el-table-column prop="payAmount" label="支付金额"  align="center"></el-table-column>
                <el-table-column prop="mainRatio" label="主承比例"  align="center"></el-table-column>
                <el-table-column prop="coinsComboRate" label="我司占比" align="center"></el-table-column>
                <el-table-column prop="settleTime" label="系统结算时间" width="150"  align="center"></el-table-column>
                <el-table-column prop="payTime" label="支付日期" width="150" align="center"></el-table-column>
                <el-table-column prop="payeeName" label="支付用户名" align="center"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <div v-show=" pagination.totalPage>0" class="index_page">
                    <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                                    :page-sizes="[10, 25, 50, 100]"
                                    :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                                    @size-change="handleSizeChange" @current-change="queryFun">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import{queryCodeList, queryInfoCaseReport, exportCaseReportInfo}from '@/api/baseDate';
import Cookies from 'js-cookie';
export default {
    name: 'caseReport',
    data() {
        return {
            loading: false,
            pagination: {
                currentPage: 1, // 当前页
                rowsNumber: 10, // 每页条数
                totalPage: 0 // 总条数
            },
            undwrtPassTime: '',
            comList:[  // 归属机构

            ],
            payObjectList:[], // 支付对象
            tableData: [],
            formInline: {
                comCode:'',
                startDate:'',
                endDate:'',
            }
        };
    },
    created() {
        this.queryInfoCaseReportList();
    },
    methods: {
        // 改变当前页条数事件
        handleSizeChange(pageSize){ 
            this.pagination.rowsNumber=pageSize
            this.queryInfoCaseReportList();
        },
        // 改变当前页事件
        queryFun(pageNum){ 
            this.pagination.currentPage = pageNum;
            this.queryInfoCaseReportList();
        },
        // 查询
        handleSearch() {
            this.queryInfoCaseReportList();
        },
        // 重置
        handleReset(){

        },
        // 查询支付对象
        queryPayObjectList(){ 
            const param = {
                codeType:'PayObject'
            }
            queryCodeList(param).then(res=> {
                this.payObjectList = res.data
            })
        },
        queryInfoCaseReportList(){
            let param = {
                ...this.formInline,
                pageNum: this.pagination.currentPage,
                pageSize: this.pagination.rowsNumber,
                comCode: Cookies.get("makeCom")
            }
            if(this.undwrtPassTime != '' && this.undwrtPassTime != null || this.undwrtPassTime != undefined){
                param.startDate = this.undwrtPassTime[0];
                param.endDate = this.undwrtPassTime[1];
            }
            this.loading = true;
            queryInfoCaseReport(param).then((res)=> this.handleTaskListResponse(res));
        },
        handleTaskListResponse(res){
            this.loading = false;
            if(res){
                if(res.data.resultCode){
                    if(res.data.resultCode != '0000'){ 
                        // 返回失败
                        this.$message.error(res.data.resultMsg);
                    }else{
                        // 返回成功
                        this.tableData = res.data.list;
                        this.pagination.totalPage = res.data.total;
                    }
                }
            }else{
                this.$message.error('系统异常'); 
            }
        },
        exportCaseReportInfoExcel(){
            let param = {
                ...this.formInline,
                comCode: Cookies.get("makeCom")
            }
             // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            exportCaseReportInfo(param).then(res => this.handleExportExecel(res));
        },
        handleExportExecel(res){
            this.loading = false;
            
            if (!res) {
                // this.failBox('导出失败','错误提示');
                this.$message.error('导出失败');
                return;
            }

            let fileName =  '案件清单信息.xls';
            let blob = new Blob([res], { type: 'application/vnd.ms-excel'})
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob)
            link.download = fileName
            link.click()
            URL.revokeObjectURL(link.href)
        },
    }
};
</script>